--- 
layout: default 
---

<section class="content">
  {% include nav_examples.html %}

  <div class="inner-content">
    <a class="edit-page-link" href="https://github.com/gpbl/react-day-picker/tree/master/docs/examples/src/{{ page.source }}" target="_blank">Edit code</a>
    <h1 class="inner-content-title">{{ page.title }}</h1>
    {{ content }}

    <div id="example" class="example-result"></div>

{% capture my_include %}{% include examples/{{ page.source }} %}{% endcapture %}
<pre><code class="language-jsx">import React from 'react';
{% if page.source-uses-input %}import moment from 'moment';
import DayPickerInput from 'react-day-picker/DayPickerInput';{% else %}{% if page.source-uses-dateutils %}import DayPicker, { DateUtils } from 'react-day-picker';{% else %}import DayPicker from 'react-day-picker';{% endif %}{% endif %}

import 'react-day-picker/lib/style.css';

{{ my_include | xml_escape }}</pre></code></pre>

    <script type="text/babel" 
     data-presets="es2015,stage-1,react" data-plugins="transform-es2015-modules-umd">
      {% include examples/{{ page.source }} %}
      ReactDOM.render(<Example />, document.getElementById('example'));
    </script>

  </div>

</section>